<template>

  <div class="bodyPad">

    <div class="mainPad">

      <div class="headInput">
        <input class="textInput" type="text" placeholder="搜索饿了么商家或商品名称" />
      </div>

      <div class="cataMenu">
        <div class="my-4 "></div>
        <div class="grid grid-cols-5 gap-2">
          <div @click = "toMeiShi">
            <img src="../assets/ms.svg">
            美食
          </div>
          <div @click = "toZaoCan">
            <img src="../assets/zc.svg">
            早餐
          </div>
          <div @click = "toDaiGou">
            <img src="../assets/ptdg.svg">
            跑腿代购
          </div>
          <div @click = "toHanBao">
            <img src="../assets/hbst.svg">
            汉堡披萨
          </div>
          <div @click = "toDrink">
            <img src="../assets/tpyp.svg">
            甜品饮品
          </div>
          <div @click = "toFastFood">
            <img src="../assets/ssjc.svg">
            速食简餐
          </div>
          <div @click = "toSnack">
            <img src="../assets/dfxc.svg">
            地方小吃
          </div>
          <div @click = "toFen">
            <img src="../assets/mfmg.svg">
            米粉面馆
          </div>
          <div @click = "toBaoZi">
            <img src="../assets/bzzp.svg">
            包子粥铺
          </div>
          <div @click = "toZhaChuan">
            <img src="../assets/zjzc.svg">
            炸鸡炸串
          </div>

        </div>
        <div class="my-4 "></div>
      </div>

      <div class="ad">
        <img src="../assets/guanggao.jpg">
      </div>

      <div class="bussinessPad">
        <div class="titlePad">
          <p class="font-bold my-3">-- 推荐商家 --</p>
        </div>
        <div class="seacherBar">
          <p class="text-center ...">综合排序</p>
          <p class="text-center ...">距离最近</p>
          <p class="text-center ...">销量最高</p>
          <p class="text-center ...">筛选</p>
        </div>
        <ur class="bussinessList">
          <li v-for="item in list" :key='item'>
            <div class="businessCard" @click = "toInfo(item.businessId)">
            <div class="bussinessicon">
              <img class="listimg" :src=item.businessImg>
            </div>

            <div class="list1">
              <div class="font-bold my-1.5">{{ item.businessName }}</div>
              <div class="stars">
                {{ item.remarks }} 月销999单
              </div>
              <div>￥{{item.starPrice}}起送|￥{{item.deliveryPrice}}配送</div>
            </div>

            <div class="list2">
              <br>
              <i class="fas fa-ellipsis-h"></i>
              <div class="bg-blue-500 text-white place-self-end">蜂鸟专送</div>
              <div>3.22km|30分钟</div>
            </div>

          </div>
          </li>
        </ur>

      </div>

    </div>

  </div>

</template>

<script setup lang="ts">
import store from "../store";
import {onBeforeMount, onMounted, onUnmounted, ref} from "vue";
import {useRouter} from "vue-router/dist/vue-router";
import axios from "axios";
function setDom(){
  store.state.currentCom=1
}

function deleteDom(){
  store.state.currentCom=0
  // console.log(store.state.currentCom)
}

onBeforeMount(()=>{
  setDom()
})

onUnmounted(()=>{
  deleteDom()
})

onMounted(async ()=>{
  await getList();
})

let list = ref([])
const router = useRouter()

const getList = () =>{
  axios.get('/Business/ListBusiness',{
  })
      .then(res=>{
        list.value = res.data;
        console.log(list)
      })
}

const toMeiShi = ()=>{
  localStorage.type = '0'
  console.log(localStorage.type)
  router.push('/businessList')
}

const toZaoCan = ()=>{
  localStorage.type = '1'
  console.log(localStorage.type)
  router.push('/businessList')
}

const toDaiGou = ()=>{
  localStorage.type = '2'
  console.log(localStorage.type)
  router.push('/businessList')
}

const toHanBao = ()=>{
  localStorage.type = '3'
  console.log(localStorage.type)
  router.push('/businessList')
}
const toDrink = ()=>{
  localStorage.type = '4'
  console.log(localStorage.type)
  router.push('/businessList')
}

const toFastFood = ()=>{
  localStorage.type = '5'
  console.log(localStorage.type)
  router.push('/businessList')
}

const toSnack = ()=>{
  localStorage.type = '6'
  console.log(localStorage.type)
  router.push('/businessList')
}

const toFen = ()=>{
  localStorage.type = '7'
  console.log(localStorage.type)
  router.push('/businessList')
}

const toBaoZi = ()=>{
  localStorage.type = '8'
  console.log(localStorage.type)
  router.push('/businessList')
}

const toZhaChuan = ()=>{
  localStorage.type = '9'
  console.log(localStorage.type)
  router.push('/businessList')
}

const toInfo = (id: any)=>{
  localStorage.id = id
  router.push('/business')
  console.log(id)
}

</script>

<style scoped>
.bodyPad {
  @apply overflow-y-scroll w-full h-full;
}

.headInput {
  @apply bg-blue-500 max-h-16 w-full p-2.5;

}
.textInput{
  @apply inset-x-0 bottom-0 w-full text-center rounded-md h-10;
}

li {list-style-type:none;}

.cataMenu{
  @apply my-3 text-center px-3;
}

.ad{
  @apply m-2;
}

.seacherBar{
  @apply text-center;
}

.mainPad {
  height: 86vh;
  overflow: scroll;
  @apply relative;
}

.barPad div {
  @apply basis-1/4 text-center;
}

.barPad i {
  @apply text-2xl;
}


.seacherBar{
  @apply grid grid-cols-4 gap-x-8;
}

.titlePad{
  @apply text-center;
}

.businessCard{
  @apply m-1 flex flex-row justify-center content-center items-center
  border border-solid border-gray-100;
}

.bussinessPad img{
  @apply w-20 h-20 m-1 justify-self-stretch;
}

.bussinessPad .list1{
  width: 46%;
  @apply flex flex-col m-1 text-sm;
}

.bussinessPad .list2{
  @apply flex flex-col text-right text-sm;
}

</style>